<template>
	<view class="wrapper" ref="wrap">
        <view>
            <view class="list-container">
                <view class="list" v-for="(item,index) of list" :key="index" :ref="index">
                    <view class="top-img"><image src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/83408c0d8871bfabd20b0b12f7362568.jpg?thumb=1&w=500&h=200" mode=""></image></view>
                    <view class="title"><text>手机{{index}}</text></view>
                    <view class="item-container">
                        <view class="item" v-for="(item,index) of [1,2,3,4,5]" :key="index">
                            <image src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/efd0aa03675839c8f20e8c38de8229c1.png?thumb=1&w=120&h=120" mode=""></image>
                            <view class="name">Redmi K30 4G</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
		
	</view>
</template>

<script>
import BScroll from 'plugin/better-scroll'
export default {
    name:'ContentList',
    props:{
        currentNav:{
            type: String
        }
    },
    watch:{
        currentNav(val){
            // console.log(this.$refs[val]);
            const elem = this.$refs[val][0].$el
            // console.log(elem);
            this.scroll.scrollToElement(elem);
        }
    },
    data() {
        return {
            list: Array(16).fill(1)
        }
    },
    methods: {
        
    },
    mounted(){
        // console.log(1);
        // this.$nextTick(function(){
        //     console.log(this.$refs);
        // })
        // setTimeout(()=>{
        //     console.log(this.$refs);
        // },500)
        this.scroll = new BScroll(this.$refs.wrap.$el,{
          mouseWheel: true,
          click: true,
          tap: true
        })
    },
}
</script>

<style lang="stylus" scoped>
    .wrapper
        // padding-left 192rpx
        padding-right 32rpx
        position absolute
        z-index 999
        overflow hidden
        top calc(var(--status-bar-height) + 100rpx)
        left 192rpx
        right 0
        bottom 0
        .list-container
            .top-img
                height 208rpx
                image
                    width 100%
                    height 100%
            .title
                height 132rpx
                line-height 132rpx
                text-align center
                >text
                    position relative
                    &:before,&:after
                        content: ""
                        position: absolute
                        top: 50%
                        width: 40rpx
                        border-top: 2rpx solid #e0e0e0
                    &:before
                        left: 0
                        transform: translate(-150%,-50%)
                    &:after
                        right: 0
                        transform: translate(150%,-50%)
            .item-container
                display flex
                flex-wrap wrap
                align-items center
                .item
                    width 33.33%
                    text-align center
                    padding-top 21rpx 
                    padding-bottom 31rpx
                    image
                        width 104rpx
                        height 104rpx
                        margin-bottom 28rpx
                    .name
                        font-size 23rpx
                        color #0000008a
</style>
